<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>
          <a-col :md='4' :sm='8'>
            <a-form-item label='所属项目'>
              <a-select show-search :filter-option='filterOption' v-model='queryParam.projectId' placeholder='请输入所属项目'
                        style='margin-right: 20px;'>
                <a-select-option value=''>请选择项目</a-select-option>
                <a-select-option v-for='item in projectList' :label='item.name' :value='item.id' :key='item.id'>
                  <span style='float: left'>{{ item.name }}</span>
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <a-form-item label='操作类型'>
              <j-dict-select-tag v-model='queryParam.optionType' dictCode='option_type'
                                 style='width: 100%'></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <a-form-item label='操作状态'>
              <j-dict-select-tag v-model='queryParam.optionStatus' dictCode='option_status'
                                 style='width: 100%'></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :md='5' :sm='8'>
            <a-form-item label='创建时间 '>
              <a-range-picker :defaultValue='[this.queryParam.opTime_begin,this.queryParam.opTime_end]'
                              v-model='queryParam.createTimeRange' @change='onChangeRangeTime' />
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <a-table
        ref='table'
        size='middle'
        :scroll='{x:true}'
        bordered
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
        class='j-table-force-nowrap'
        @change='handleTableChange'>
        <span slot='optionStatus' slot-scope='text,record,index'>
          <span v-if='record.errorNumber==0 && record.waitUseing>0' style='color: green'>待生效</span>
          <span v-else-if='record.errorNumber==0 && record.waitUseing == 0' style='color: blue'>发送成功</span>
          <span v-else-if='record.errorNumber>0' style='color: red'>发送失败</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="handleDetail(record)">详情</a>
        </span>
      </a-table>
    </div>
    <modal-form-detail ref='modalFormDetail'></modal-form-detail>
  </a-card>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterObj } from '@/utils/util'
import { getAction } from '@api/manage'
import ModalFormDetail from '@views/passage/cmdLog/modules/ModalFormDetail'
import { getProjectList } from '@api/api'
import moment from 'moment'

export default {
  name: 'UserCmdLogList',
  mixins: [JeecgListMixin, mixinDevice],
  components:{
    ModalFormDetail
  },
  data() {
    return {
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        isorter: {
          column: 'createTime',
          order: 'desc'
        }
      },
      /*查询区域属性*/
      queryParam: {
        optionType: '',
        optionStatus: '',
        deviceSn: '',
        opTime_begin: '',
        opTime_end: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {},
      description: '设备记录表管理页面',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'projectName'
        },
        {
          title: '用户名',
          align: 'center',
          dataIndex: 'userName',
          width: 140
        },
        {
          title: '操作类型',
          align: 'center',
          dataIndex: 'optionType_dictText',
          width: 140
        },
        {
          title: '操作状态',
          align: 'center',
          scopedSlots: { customRender: 'optionStatus' },
          width: 140
        },
        {
          title: '修改内容',
          align: 'center',
          dataIndex: 'arg',
          customRender: function(t, r, index) {
            if (t === null || t === undefined || t === '') {
              return '无'
            }
            if (t.length > 20) {
              return <a-tooltip placement='topLeft' title={t}>{t.substr(0, 20)}...</a-tooltip>
            }
            return t
          }
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      projectList: [],
      url: {
        list: '/optionLog/list'
      },
      dictOptions: {},
      superFieldList: []
    }
  },
  created() {
    // 初始化时间
    this.queryParam.opTime_begin = this.getDefaultData();
    this.queryParam.opTime_end = this.getDefaultData();
    this.initDictConfig()
    this.initProjectList()
  },
  methods: {
    getDefaultData(){
      return moment(new Date()).format("YYYY-MM-DD");
    },
    handleDetail(record) {
      this.$refs.modalFormDetail.check(record)
      this.$refs.modalFormDetail.title = "详情"
    },
    initProjectList() {
      getProjectList().then((res) => {
        if (res.success) {
          this.projectList = res.result
        }
      })
    },
    filterOption(input, option) {
      let com = option.componentOptions
      let name = String(com.propsData.label)
      if (name.toLowerCase().includes(input.toLowerCase())) {
        return true
      }
    },
    onChangeRangeTime(date, dateString) {
      console.log("@@",this.queryParam.createTimeRange)
      this.queryParam.opTime_begin = dateString[0]
      this.queryParam.opTime_end = dateString[1]
    },
    searchQuery() {
      let startTime = this.queryParam.opTime_begin
      let endTime = this.queryParam.opTime_end
      if (startTime != '' && endTime != '') {
        if (startTime > endTime) {
          this.$message.error('开始时间不能大于结束时间')
          return
        }
      }

      if (startTime == '' && endTime != '') {
        this.$message.error('请选择开始时间')
        return
      }

      if (startTime != '' && endTime == '') {
        this.$message.error('请选择结束时间')
        return
      }

      this.loadData(1)
    },
    searchReset: function() {
      this.queryParam = {
        "opTime_begin": this.getDefaultData(),
        "opTime_end": this.getDefaultData(),
        "optionType": '',
        "optionStatus": ''
      }
      this.loadData(1)
    },
    getQueryParams() {
      var param = Object.assign({}, this.isorter, this.queryParam)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      if (this.queryParam.opTime_begin != '' && this.queryParam.opTime_end != '') {
        if (this.queryParam.opTime_begin != undefined) {
          param.opTime_begin = this.queryParam.opTime_begin + ' 00:00:00'
        }
        if (this.queryParam.opTime_end != undefined) {
          param.opTime_end = this.queryParam.opTime_end + ' 23:59:59'
        }
      }

      return filterObj(param)
    },
    /*展示数据*/
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true
      console.log(params)
      getAction(this.url.list, params).then((res) => {
        console.log(this.url.list)
        if (res.success && res.result != null) {
          console.log(res.result)
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })

    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>